<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'change-trend'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      //   const that = this
      this.chart = this.$echarts.init(this.$el)
      var nameArr = [
        { name: '台风', max: 200 },
        { name: '暴雨', max: 200 },
        { name: '冰雹', max: 200 },
        { name: '雷暴', max: 200 },
        { name: '暴雪', max: 200 },
        { name: '暴风雪', max: 200 },

        { name: '干旱', max: 200 },
        { name: '洪涝', max: 200 },
        { name: '持续高温', max: 200 },
        { name: '雪灾', max: 200 },
        { name: '沙漠化', max: 200 },
        { name: '山体滑波', max: 200 },

        { name: '泥石流', max: 200 },
        { name: '雪崩', max: 200 },
        { name: '海啸', max: 200 },
        { name: '海洋赤潮', max: 200 },
        { name: '传染病', max: 200 }
      ]
      this.chart.setOption({
        backgroundColor: 'black',
        baseOption: {
          timeline: {
            axisType: 'category',
            symbolSize: 8,
            lineStyle: {
              color: '#00a6bd'
            },
            itemStyle: {
              color: '#f25a76'
            },
            checkpointStyle: {
              color: '#f25a76'
            },
            controlStyle: {
              color: '#00a6bd',
              borderColor: '#00a6bd'
            },
            label: {
              color: '#00a6bd'
            },
            autoPlay: true,
            playInterval: 1500,
            data: [
              '2000',
              '2001',
              '2002',
              '2003',
              '2004',
              '2005',
              '2006',
              '2007',
              '2008',
              '2009',
              '2010',
              '2011',
              '2012',
              '2013',
              '2014',
              '2015',
              '2016',
              '2017',
              '2018',
              '2019',
              '2020',
              '2021',
              '2022'
            ]
          },
          color: ['#f25a76', '#00a6bd'],
          // backgroundColor: 'rgba(2,50,30,0.8)',
          title: {
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          legend: {
            data: ['中国', '全球'],
            top: 15,
            right: 20,
            textStyle: {
              color: '#fff'
            }
          },
          radar: {
            shape: 'circle',
            name: {
              textStyle: {
                color: 'rgb(238, 197, 102)',
                backgroundColor: 'rgba(0,0,0,0.6)',
                borderRadius: 3,
                padding: [3, 5]
              },
              axisLabel: {
                rotate: 50
              }
            },
            nameGap: 20,
            indicator: nameArr,
            splitNumber: 5,

            splitLine: {
              lineStyle: {
                color: [
                  'rgba(238, 197, 102, 0.1)',
                  'rgba(238, 197, 102, 0.2)',
                  'rgba(238, 197, 102, 0.4)',
                  'rgba(238, 197, 102, 0.6)',
                  'rgba(238, 197, 102, 0.8)',
                  'rgba(238, 197, 102, 1)'
                ].reverse()
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(238, 197, 102, 0.5)'
              }
            }
          },
          series: [
            {
              name: '预算 vs 全球',
              type: 'radar',
              tooltip: {
                trigger: 'item',
                position: [10, 10],
                padding: 10,
                backgroundColor: 'rgba(0,0,0,.8)',
                borderColor: '#00a6bd',
                borderWidth: '2',
                extraCssText: 'width:400px',
                formatter: function (param) {
                  var returnStr = ''
                  var valueArr = param.value
                  returnStr += param.data.value2 + '<br/>'
                  for (var i in valueArr) {
                    if (valueArr[i] > 0) {
                      var oneStr = nameArr[i].name + '：' + valueArr[i] + '<br>'
                      returnStr += oneStr
                    }
                  }
                  return returnStr
                }
              }
            }
          ]
        },
        options: [
          {
            title: {
              text: '2000年',
              top: 0
            },
            series: [
              {
                data: [
                  {
                    value: [
                      5, 67, 34, 55, 15, 37, 65, 89, 12, 99, 78, 23, 12, 36, 53,
                      42, 81
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2000年中国</span>'
                  },
                  {
                    value: [
                      178, 123, 112, 136, 153, 142, 181, 150, 167, 134, 155,
                      115, 137, 165, 189, 112, 199
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2000年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2001年' },
            series: [
              {
                data: [
                  {
                    value: [
                      37, 65, 89, 12, 99, 78, 23, 5, 67, 34, 55, 15, 12, 36, 53,
                      42, 81
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2001年中国</span>'
                  },
                  {
                    value: [
                      167, 134, 155, 178, 123, 112, 136, 153, 142, 181, 150,
                      115, 137, 165, 189, 112, 199
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2001年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2002年' },
            series: [
              {
                data: [
                  {
                    value: [
                      34, 55, 15, 12, 36, 53, 42, 81, 37, 65, 89, 12, 99, 78,
                      23, 5, 67
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2002年中国</span>'
                  },
                  {
                    value: [
                      167, 137, 165, 189, 112, 199, 134, 155, 178, 123, 112,
                      136, 153, 142, 181, 150, 115
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2002年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2003年' },
            series: [
              {
                data: [
                  {
                    value: [
                      88, 55, 15, 37, 65, 89, 12, 12, 36, 53, 42, 81, 99, 78,
                      23, 5, 39
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2003年中国</span>'
                  },
                  {
                    value: [
                      188, 153, 142, 181, 150, 115, 137, 165, 189, 112, 199,
                      134, 155, 178, 123, 112, 136
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2003年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2004年' },
            series: [
              {
                data: [
                  {
                    value: [
                      65, 55, 15, 37, 65, 89, 81, 99, 78, 23, 99, 39, 12, 12,
                      36, 53, 42
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2004年中国</span>'
                  },
                  {
                    value: [
                      123, 155, 178, 123, 112, 163, 153, 142, 181, 150, 115,
                      137, 165, 189, 112, 199, 134
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2004年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2005年' },
            series: [
              {
                data: [
                  {
                    value: [
                      69, 55, 78, 23, 99, 15, 37, 65, 89, 81, 83, 39, 12, 12,
                      36, 53, 99
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2005年中国</span>'
                  },
                  {
                    value: [
                      165, 189, 112, 199, 134, 123, 155, 178, 123, 112, 163,
                      153, 142, 181, 150, 115, 137
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2005年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2006年' },
            series: [
              {
                data: [
                  {
                    value: [
                      77, 36, 78, 23, 48, 15, 26, 65, 89, 98, 83, 39, 12, 12,
                      27, 46, 65
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2006年中国</span>'
                  },
                  {
                    value: [
                      142, 181, 150, 115, 137, 165, 189, 112, 199, 134, 123,
                      155, 178, 123, 112, 163, 153
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2006年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2007年' },
            series: [
              {
                data: [
                  {
                    value: [
                      63, 36, 77, 23, 48, 44, 98, 83, 15, 26, 65, 39, 12, 12,
                      27, 46, 98
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2007年中国</span>'
                  },
                  {
                    value: [
                      122, 189, 112, 142, 181, 150, 115, 199, 134, 123, 155,
                      178, 123, 112, 163, 153, 136
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2007年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2008年' },
            series: [
              {
                data: [
                  {
                    value: [
                      98, 36, 77, 23, 26, 65, 39, 12, 12, 27, 48, 44, 98, 83,
                      15, 46, 59
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2008年中国</span>'
                  },
                  {
                    value: [
                      188, 115, 199, 134, 123, 155, 178, 123, 112, 163, 189,
                      112, 142, 181, 150, 153, 198
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2008年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2009年' },
            series: [
              {
                data: [
                  {
                    value: [
                      76, 27, 48, 44, 98, 83, 15, 46, 36, 77, 23, 26, 65, 39,
                      12, 12, 99
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2009年中国</span>'
                  },
                  {
                    value: [
                      134, 123, 112, 163, 189, 112, 142, 181, 150, 153, 115,
                      199, 134, 123, 155, 178, 166
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2009年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2010年' },
            series: [
              {
                data: [
                  {
                    value: [
                      69, 15, 46, 36, 77, 27, 48, 44, 98, 83, 23, 26, 65, 39,
                      12, 12, 53
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2010年中国</span>'
                  },
                  {
                    value: [
                      155, 123, 169, 163, 189, 138, 142, 181, 150, 153, 87, 95,
                      111, 187, 155, 178, 126
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2010年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2011年' },
            series: [
              {
                data: [
                  {
                    value: [
                      63, 36, 77, 23, 48, 44, 98, 83, 15, 26, 65, 39, 12, 12,
                      27, 46, 98
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2011年中国</span>'
                  },
                  {
                    value: [
                      165, 189, 112, 199, 134, 123, 155, 178, 123, 112, 163,
                      153, 142, 181, 150, 115, 137
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2011年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2012年' },
            series: [
              {
                data: [
                  {
                    value: [
                      13, 55, 78, 23, 99, 15, 37, 65, 89, 81, 83, 39, 12, 12,
                      36, 53, 33
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2012年中国</span>'
                  },
                  {
                    value: [
                      188, 115, 199, 134, 123, 155, 178, 123, 112, 163, 189,
                      112, 142, 181, 150, 153, 198
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2012年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2013年' },
            series: [
              {
                data: [
                  {
                    value: [
                      79, 55, 78, 23, 99, 15, 37, 65, 89, 81, 83, 39, 12, 12,
                      36, 53, 63
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2013年中国</span>'
                  },
                  {
                    value: [
                      165, 115, 199, 134, 123, 155, 178, 123, 112, 163, 189,
                      112, 142, 181, 150, 153, 144
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2013年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2014年' },
            series: [
              {
                data: [
                  {
                    value: [
                      99, 36, 78, 23, 48, 15, 26, 65, 89, 98, 83, 39, 12, 12,
                      27, 46, 36
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2014年中国</span>'
                  },
                  {
                    value: [
                      165, 189, 112, 199, 134, 123, 155, 178, 123, 112, 163,
                      153, 142, 181, 150, 115, 137
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2014年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2015年' },
            series: [
              {
                data: [
                  {
                    value: [
                      63, 36, 77, 23, 48, 44, 98, 83, 15, 26, 65, 39, 12, 12,
                      27, 46, 98
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2015年中国</span>'
                  },
                  {
                    value: [
                      188, 115, 199, 134, 123, 155, 178, 123, 112, 163, 189,
                      112, 142, 181, 150, 153, 198
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2015年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2016年' },
            series: [
              {
                data: [
                  {
                    value: [
                      34, 55, 15, 12, 36, 53, 42, 81, 37, 65, 89, 12, 99, 78,
                      23, 5, 67
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2016年中国</span>'
                  },
                  {
                    value: [
                      165, 115, 199, 134, 123, 155, 178, 123, 112, 163, 189,
                      112, 142, 181, 150, 153, 144
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">2016年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2017年' },
            series: [
              {
                data: [
                  {
                    value: [
                      15, 26, 65, 39, 12, 63, 36, 77, 23, 48, 44, 27, 46, 98,
                      98, 83, 12
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">1971年中国</span>'
                  },
                  {
                    value: [
                      188, 115, 199, 134, 123, 155, 178, 123, 112, 163, 189,
                      112, 142, 181, 150, 153, 198
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">1971年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2018年' },
            series: [
              {
                data: [
                  {
                    value: [
                      12, 12, 53, 69, 15, 46, 36, 77, 27, 48, 44, 98, 83, 23,
                      26, 65, 39
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">1972年中国</span>'
                  },
                  {
                    value: [
                      112, 142, 181, 150, 153, 198, 188, 115, 199, 134, 123,
                      155, 178, 123, 112, 163, 189
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">1972年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2019年' },
            series: [
              {
                data: [
                  {
                    value: [
                      13, 55, 78, 23, 99, 15, 37, 65, 89, 81, 83, 39, 12, 12,
                      36, 53, 33
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">1973年中国</span>'
                  },
                  {
                    value: [
                      142, 181, 150, 153, 198, 188, 115, 199, 134, 123, 155,
                      178, 123, 112, 163, 189, 112
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">1973年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2020年' },
            series: [
              {
                data: [
                  {
                    value: [
                      79, 55, 78, 23, 99, 15, 37, 65, 89, 81, 83, 39, 12, 12,
                      36, 53, 63
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">1975年中国</span>'
                  },
                  {
                    value: [
                      112, 163, 189, 112, 142, 181, 150, 153, 198, 188, 115,
                      199, 134, 123, 155, 178, 123
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">1975年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2021年' },
            series: [
              {
                data: [
                  {
                    value: [
                      15, 81, 83, 13, 55, 78, 23, 99, 39, 12, 12, 36, 53, 33,
                      37, 65, 89
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">1977年中国</span>'
                  },
                  {
                    value: [
                      142, 181, 150, 115, 137, 165, 189, 112, 199, 134, 123,
                      155, 178, 123, 112, 163, 153
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">1977年全球</span>'
                  }
                ]
              }
            ]
          },
          {
            title: { text: '2022年' },
            series: [
              {
                data: [
                  {
                    value: [
                      65, 55, 15, 37, 65, 89, 81, 99, 78, 23, 99, 39, 12, 12,
                      36, 53, 42
                    ],
                    name: '中国',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">1981年中国</span>'
                  },
                  {
                    value: [
                      122, 189, 112, 142, 181, 150, 115, 199, 134, 123, 155,
                      178, 123, 112, 163, 153, 136
                    ],
                    name: '全球',
                    value2:
                      '<span style="font-size:18px;font-weight:600;">1981年全球</span>'
                  }
                ]
              }
            ]
          }
        ]
      })
    }
  }
}
</script>
